<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />

		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" href="css/common.css" />
		<title></title>
	</head>

	<body style="overflow: hidden;">
		<div class="loading_box">
			<div class="loading_head_img">
				<div class="loading_logo_box"><img src="img/loading_logo_img.jpg" /></div>
			</div>
			<div class="loading_text_box">文化部文化艺术人才中心
				<br />（亦称“文化部职业技能鉴定指导中心”）于1996年1月经中央机构编制委员会办公室批准成立，为文化部直属全民所有制事业单位，是全国文化艺术人才中介机构，也是全国文化行业特有职业鉴定机构。</div>
			<a href="javascript:;" class="continue"><span>continue</span></a>
			<div class="ui-spinner">
				<span class="side side-left"><span class="fill"></span></span>
				<span class="side side-right"><span class="fill"></span></span>
				<span class="sideOn"></span>
			</div>
		</div>

		<div class="head white">
			<div class="logo">全国社会艺术水平考级网站</div>
			<ul class="level_one">
				<li class="onthis"><a href="">首页</a></li>
				<li><a href="">通知公告</a></li>
				<li><a href="">政策文件</a></li>
				<li class="has_levelTwo">
					<a href="">考级动态</a>
					<ul class="level_two">
						<li>
							<a href="">考级动态</a>
						</li>
						<li>
							<a href="">考级动态</a>
						</li>
						<li>
							<a href="">考级动态</a>
						</li>
						<li>
							<a href="">考级动态</a>
						</li>
						<li>
							<a href="">考级动态</a>
						</li>
						<li>
							<a href="">考级动态</a>
						</li>
					</ul>
				</li>
				<li class="has_levelTwo">
					<a href="">考级机构</a>
					<ul class="level_two">
						<li>
							<a href="">考级动态</a>
						</li>
						<li>
							<a href="">考级动态</a>
						</li>
						<li>
							<a href="">考级动态</a>
						</li>
						<li>
							<a href="">考级动态</a>
						</li>
						<li>
							<a href="">考级动态</a>
						</li>
						<li>
							<a href="">考级动态</a>
						</li>
					</ul>
				</li>
				<li><a href="">考级培训</a></li>
				<li><a href="">展演展示</a></li>
				<li><a href="">关于我们</a></li>
			</ul>
			<div class="seach_container">
				<div class="seach_box">
					<input type="text" placeholder="请输入关键词" />
					<button><i class="iconfont icon-iconsmallsearch" /></i></button>
				</div>
				<p>
					<a href="">考级管理 </a>
					<a href="">考级政策</a>
					<a href="">培训</a>
					<a href="">考级时间</a>
				</p>
			</div>
		</div>

		<div class="swiper-container" id="index">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div class="page">
						<div class="swiper-container" id="page1">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<div class="page flex flex_center pg1">
										<div class="tagBall white_bg">
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
											<a class="tag" target="_blank" href="#">北京爱乐考级委员会</a>
										</div>
									</div>
								</div>
								<div class="swiper-slide">
									<div class="page flex flex_center pg2">
										<div class="white_bg flex flex_center">
											<div class="white_box_content">
												<img src="img/kgcx_icon.png" />
												<p>考官查询</p>
											</div>
										</div>
										<img class="white_circle_img" src="img/white_circle_img.png" />
									</div>
								</div>
								<div class="swiper-slide">
									<div class="page flex flex_center pg3">
										<div class="white_bg flex flex_center">
											<div class="white_box_content">
												<img src="img/kscx_icon.png" />
												<p>考生查询</p>
											</div>
										</div>
										<img class="white_circle_img" src="img/white_circle_img.png" />
									</div>
								</div>
								<div class="swiper-slide">
									<div class="page flex flex_center pg4">
										<div class="white_bg flex flex_center">
											<div class="white_box_content">
												<img src="img/xtdl_icon.png" />
												<p>全国社会艺术水平考级<br />服务系统登陆</p>
											</div>
										</div>
										<img class="white_circle_img" src="img/white_circle_img.png" />
									</div>
								</div>
							</div>
							<div class="swiper-pagination" id="page1_sp"></div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page">
						<div class="page_two_head">
							<div class="page_two_head_nav">
								<div class="container">
									<ul>
										<li>
											<a href="">
												<img src="img/xtdl_icon1.png" />
												<p>全国社会艺术水平考级<br />服务系统登陆</p>
											</a>
										</li>
										<li>
											<a href="">
												<img src="img/kscx_icon1.png" />
												<p>考生查询</p>
											</a>
										</li>
										<li>
											<a href="">
												<img src="img/kgcx_icon1.png" />
												<p>考官查询</p>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="container flex pt">
							<div class="flex w100">
								<div class="page_two_box animated fadeInLeft">
									<h1 class="title">通知公告</h1>
									<div class="notice_box">
										<div class="notice_first_box">
											<img src="img/notice_icon.png" />
											<p><a href="">关于征集社会艺术水平考级服务系统用户信息的通知<span>2018/08/12</span></a></p>
										</div>
										<div class="notice_content_box">
											<ul>
												<li>
													<a href="">社会艺术水平考级管理办法社会艺术水平考级管理办法</a>
													<span>2018/08/12</span>
												</li>
												<li>
													<a href="">社会艺术水平考级管理办法社会艺术水平考级管理办法</a>
													<span>2018/08/12</span>
												</li>
												<li>
													<a href="">社会艺术水平考级管理办法社会艺术水平考级管理办法</a>
													<span>2018/08/12</span>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="page_two_box animated fadeInRight">
									<h1 class="title">
										政策文件
										<a href="" class="more">查看更多<img src="img/more_arr_icon.png" /></a>
									</h1>
									<ul class="file_list">
										<li>
											<a href="">
												<h1>考级管理办法</h1>
												<p>文化部办公厅关于印发社会艺术水平考级专业目录（音乐类、舞蹈类、美术……）的通知</p>
											</a>
										</li>
										<li>
											<a href="">
												<h1>考级管理办法</h1>
												<p>文化部办公厅关于印发社会艺术水平考级专业目录（音乐类、舞蹈类、美术……）的通知</p>
											</a>
										</li>
										<li>
											<a href="">
												<h1>考级管理办法</h1>
												<p>文化部办公厅关于印发社会艺术水平考级专业目录（音乐类、舞蹈类、美术……）的通知</p>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page ps flex flex_center">
						<div class="container">
							<h1 class="title borBottom">
								考级动态
								<a href="" class="more black">查看更多<img src="img/more_arr_icon.png" /></a>
							</h1>
							<ul class="news_list">
								<li class="animated fadeInLeft delay-200ms">
									<a href="">
										<img src="img/news_list_img1.jpg" />
										<div class="news_list_timebox">
											<strong>12</strong>
											<div>
												<p>08</p>
												<p>2018</p>
											</div>
										</div>
										<div class="new_list_content">2017年全国社会艺术水平考级工作座谈会在广州召开2017年全国社会艺术水平考级工作座谈会在广州召开</div>
										<div class="more news">详情<img src="img/more_arr_icon.png" /></div>
									</a>
								</li>
								<li class="animated fadeInDown">
									<a href="">
										<img src="img/news_list_img2.jpg" />
										<div class="news_list_timebox">
											<strong>07</strong>
											<div>
												<p>06</p>
												<p>2018</p>
											</div>
										</div>
										<div class="new_list_content">深化考级改革 推进行业自律</div>
										<div class="more news">详情<img src="img/more_arr_icon.png" /></div>
									</a>
								</li>
								<li class="animated fadeInRight delay-200ms">
									<a href="">
										<img src="img/news_list_img3.jpg" />
										<div class="news_list_timebox">
											<strong>26</strong>
											<div>
												<p>04</p>
												<p>2018</p>
											</div>
										</div>
										<div class="new_list_content">全国社会艺术考级工作交流暨系统应用工作会在杭州举办</div>
										<div class="more news">详情<img src="img/more_arr_icon.png" /></div>
									</a>
								</li>
							</ul>
						</div>
						<div class="hmPage2Bg">
			                <div class="hmPage2Layer"></div>
			                <iframe id="canvasBg" class="canvasBg" src="img/ifrem/index.html"></iframe>
			            </div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page ps pf flex flex_center">
						<div class="container">
							<h1 class="title borBottom">考级机构</h1>
							<ul class="ins_list">
								<li class="animated fadeInDown">
									<a href="">
										<div>中央芭蕾舞团</div>
									</a>
								</li>
								<li class="animated fadeInUp">
									<a href="">
										<div>北京爱乐考级委员会</div>
									</a>
								</li>
								<li class="animated fadeInDown">
									<a href="">
										<div>中国音乐学院考级委员会</div>
									</a>
								</li>
								<li class="animated fadeInUp">
									<a href="">
										<div>查看更多<img src="img/more_arr_icon.png" /></div>
									</a>
								</li>
								<li class="animated fadeInDown">
									<a href="">
										<div>中国艺术职业教育学会</div>
									</a>
								</li>
								<li class="animated fadeInUp">
									<a href="">
										<div>中国艺术科技研究所社会艺术水平考级中心</div>
									</a>
								</li>
								<li class="animated fadeInDown">
									<a href="">
										<div>中国舞蹈家协会</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page ps pv flex flex_center">
						<div class="container">
							<div class="page_five_box">
								<h1 class="title borBottom white">
									考级培训
									<a href="" class="more black">查看更多<img src="img/more_arr_icon.png" /></a>
								</h1>
								<ul class="training_list">
									<li class="animated fadeInRight">
										<img src="img/training_list_img1.png" />
										<p><a href="">全市社会艺术水平音乐考级辅导教师培训班开班</a></p>
									</li>
									<li class="animated fadeInRight delay-200ms">
										<img src="img/training_list_img2.png" />
										<p><a href="">全市社会艺术水平音乐考级辅导教师培训班开班</a></p>
									</li>
									<li class="animated fadeInRight delay-400ms">
										<img src="img/training_list_img3.png" />
										<p><a href="">全市社会艺术水平音乐考级辅导教师培训班开班</a></p>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page ps flex flex_center">
						<div class="container">
							<h1 class="title borBottom">
								展演展示
								<a href="" class="more black">查看更多<img src="img/more_arr_icon.png" /></a>
							</h1>
							<ul class="show_list">
								<li class="animated fadeInDown">
									<a href="">
										<p>“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕</p>
										<div class="more white">查看详情<img src="img/more_arr_icon_red.png" /></div>
									</a>
								</li>
								<li class="animated fadeInDown delay-200ms">
									<a href="">
										<p>“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕</p>
										<div class="more white">查看详情<img src="img/more_arr_icon_red.png" /></div>
									</a>
								</li>
								<li class="animated fadeInDown delay-400ms">
									<a href="">
										<p>“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕</p>
										<div class="more white">查看详情<img src="img/more_arr_icon_red.png" /></div>
									</a>
								</li>
								<li class="animated fadeInUp delay-600ms">
									<a href="">
										<p>“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕</p>
										<div class="more white">查看详情<img src="img/more_arr_icon_red.png" /></div>
									</a>
								</li>
								<li class="animated fadeInUp  delay-800ms">
									<a href="">
										<p>“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕</p>
										<div class="more white">查看详情<img src="img/more_arr_icon_red.png" /></div>
									</a>
								</li>
								<li class="animated fadeInUp delay-1s">
									<a href="">
										<p>“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕“红星美凯龙杯”中国音乐学院第二届广西考级展演圆满落幕</p>
										<div class="more white">查看详情<img src="img/more_arr_icon_red.png" /></div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page ps pl">
						<div class="container last flex flex_center">
							<div>
								<h1 class="title borBottom white animated fadeInRight">
									关于我们
									<a href="" class="more black">查看更多<img src="img/more_arr_icon.png" /></a>
								</h1>
								<div class="about_text_box">
									<p class="animated fadeInRight delay-200ms">文化部文化艺术人才中心（亦称“文化部职业技能鉴定指导中心”）于1996年1月经中央机构编制委员会办公室批准成立，为文化部直属全民所有制事业单位，是全国文化艺术人才中介机构，也是全国文化行业特有职业鉴定机构。</p>
									<p class="animated fadeInRight delay-400ms">人才中心自成立以来，遵循“以人为本，诚信至上，服务人才，服务公共文化建设”的宗旨，以加强文化人才队伍建设为己任，积极承担全国文化人才公共服务工作，提升文化行业的整体竞争力，为文化大发展大繁荣提供优质高效的人才服务工作。</p>
									<p class="animated fadeInRight delay-600ms">主要业务范围：开展文化行业人才社会化服务、人才市场中介服务；承担人事代理、人才派遣、人才咨询工作；开展流动人员人事档案收存及管理工作；承办人才交流、人力资源开发、人才培训、人才评价工作；开展人才信息收集、整理、发布工作，建立人才信息库；承办文化行业职业技能鉴定、职业资格考试、专业水平考评的工作；组织人才成果开发、利用、展览、演示等工作；开展人才输出、引进和猎头服务工作；开展出国（境）留学、劳务输出和境外就业服务工作；承办直属单位人事争议调解工作；主办中国文化人才网、中国京剧杂志社、培训中心。</p>
								</div>
								<ul class="about_link_list">
									<li><a href=""><img src="img/zgwhlcw_img.png" /></a></li>
									<li><a href=""><img src="img/zgwhscw_img.png" /></a></li>
									<li><a href=""><img src="img/zgwhhlyb_img.png" /></a></li>
								</ul>
							</div>
						</div>
						<div class="foot">
							<div class="container flex">
								<div>
									<h1>联系我们</h1>
									<p><i class="iconfont icon-dizhi"></i><span>地址：北京市朝阳区东土城路15号文化部文化艺术人才中心</span></p>
									<p><i class="iconfont icon-youjian"></i><span>邮编：100013</span></p>
									<p><i class="iconfont icon-dianhua"></i><span>电话：010-64298759</span></p>
								</div>
								<div>
									<img src="img/gov_icon.png"/>
									<p>文化部文化艺术人才中心版权所有，不得非法镜像．</p>
									<p>技术支持：文化部信息中心</p>
									<p>ICP备案编号：京ICP备06000399</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination" id="index_sp"></div>
		</div>

	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<script type="text/javascript" src="js/demo.js"></script>
	<script type="text/javascript">
		var clickConfirm = false;

		setTimeout(function() {
			if(clickConfirm) return;
			$(".loading_box").fadeOut(500);

			mySwiper_index = new Swiper('#index', {
				direction: 'vertical',
				height: window.innerHeight,
				swipeHandler: '.swipe-handler',
				
				pagination: {
					el: '#index_sp',
				},

				on: {
					transitionEnd: function(swiper) {
						//alert('过渡结束');
						transEndConfirm = true;
						if(this.activeIndex >= 2){
							$('.head').removeClass('white');
						}else{
							$('.head').addClass('white');
						}
					},
				},
			})

			var mySwiper_page = new Swiper('#page1', {
				height: window.innerHeight,
				
				pagination: {
					el: '#page1_sp',
				},
			})
			
			//$('.pl').height($(window).height() - $('.foot').height() - 100);
		}, 10000);

		var mySwiper_index;
		$('.continue').click(function(e) {
			$(".loading_box").fadeOut(500);

			clickConfirm = true;
			mySwiper_index = new Swiper('#index', {
				direction: 'vertical',
				height: window.innerHeight,
				swipeHandler: '.swipe-handler',
				
				pagination: {
					el: '#index_sp',
				},

				on: {
					transitionEnd: function(swiper) {
						//alert('过渡结束');
						transEndConfirm = true;
						if(this.activeIndex >= 2){
							$('.head').removeClass('white');
						}else{
							$('.head').addClass('white');
						}
					},
				},
			})

			var mySwiper_page = new Swiper('#page1', {
				height: window.innerHeight,
				
				pagination: {
					el: '#page1_sp',
				},
			})
			
			//$('.pl').height($(window).height() - $('.foot').height() - 100);
		})

		var transEndConfirm = true;
		$(window).on("mousewheel", function(e) {
			if(!transEndConfirm) return;
			if(e.originalEvent.wheelDelta > 0) {
				if(mySwiper_index.activeIndex == 0) return;
				transEndConfirm = false;
				mySwiper_index.slidePrev();
			} else {
				if(mySwiper_index.activeIndex == mySwiper_index.slides.length - 1) return;
				transEndConfirm = false;
				mySwiper_index.slideNext();
			}
		});
		
		$('.has_levelTwo').hover(function(e){
			$('.level_two').stop(true,true);
			$(this).find('.level_two').slideDown();
		},function(e){
			
			$(this).find('.level_two').slideUp();
		})
	</script>
</html>